<script lang="ts">
export default {
  name: 'Study4StuDemo3'
}
</script>

<template>
  <h2>reactive() 的局限性</h2>

  <div class="note">
    <h3>
      Vue 3 的 `reactive()` 函数用于创建响应式对象，它通过 `Proxy`
      对对象进行包装，以实现响应式系统。然而，`reactive()` 存在一些局限性：
    </h3>
    <p>
      1. **值类型限制**：`reactive()` 只能用于对象类型（如对象、数组、`Map`、`Set`
      等），不能用于原始类型（如 `string`、`number`、`boolean`）。
    </p>
    <p>
      2. **不能替换整个对象**：由于 `reactive()`
      通过属性访问实现响应式跟踪，因此不能替换整个响应式对象，否则会丢失响应性。例如，不能直接将一个新的对象赋值给已经声明为
      `reactive` 的变量。
    </p>
    <p>
      3. **对解构操作不友好**：解构 `reactive` 对象的属性时，解构出来的变量会失去响应性。例如，从
      `reactive` 对象中解构出一个属性后，对该属性的修改不会触发界面更新。
    </p>
    <p>
      4. **引用问题**：`reactive()`
      返回的是一个代理对象，与原始对象不是同一个引用。如果需要保持原始对象的引用不变，就不能使用
      `reactive()` 重新包装一个新的对象。
    </p>
    <p>
      5. **深层响应性**：虽然 `reactive()`
      默认是深层响应的，可以自动将对象内部的嵌套对象也转换为响应式，但在处理大型或复杂的数据结构时，这可能会导致性能问题。
    </p>
    <p>
      6. **数组更新限制**：直接对 `reactive`
      包装的数组进行重新赋值会导致响应式丢失，需要通过数组的方法（如 `push`、`splice`
      等）来修改数组以保持响应性。
    </p>
    <p>
      由于这些限制，Vue 3 官方推荐使用 `ref()` 作为声明响应式状态的主要 API，因为 `ref()`
      更加灵活，可以处理所有类型的数据，并且避免了 `reactive()` 的一些局限性。
    </p>
  </div>
</template>

<script setup lang="ts"></script>

<style scoped>
body {
  padding: 20px;
}
h2 {
  color: red;
}
h3 {
  color: rgb(220, 85, 85);
}
h4 {
  color: skyblue;
}
.hr-style {
  border: 3px solid gold;
  margin: 20px 0;
}
.note {
  margin: 10px;
  padding: 10px;
  border: 3px solid rgb(221, 121, 202);
}
.note p {
  color: rgb(226, 106, 204);
  font-weight: bold;
}
</style>
